<template>
	<r-popup
		:show="show" 
		@close="cancel"
        @onOk="cancel"
		:title="title"
        :okText="okText"
		:height="height"
		:maskCloseAble="true"
		>
		<scroll-view :scroll-y="true" :style="`maxHeight:${maxHeight}px;height:calc(100% - 56px);`">
			<view class="checkBack" >
				<r-radio-group :value="value" @change="radioGroupChange">
					<r-radio-item
						v-for="(item, index) in list" :key="index" 
						:name="item.value"
						:disabled="item.disabled"
					>
						{{item.label}}
					</r-radio-item>
				</r-radio-group>
			</view>
		</scroll-view>
	</r-popup>
</template>

<script>
let systemInfo = uni.getSystemInfoSync();	
export default {
    name: "r-popup-radio",
	model:{
		prop:"show",
		event:"close"
	},
	props:{
		show:{
			type:Boolean,
			default:false
		},
		height:{
			type:String,
			default:"90%"	
		},
		defaultValue:{
			default:null,
		},
		list:{
			type:Array,
			default:[]
		},
		title:{
			type:String,
			default:"单选"
		},
		okText:{
			type:String,
			default:"取消"
		}
	},
	watch:{
		show:function(n,o) {
			if(n) {
				this.value = this.defaultValue;
			}
		}
	},
	data() {
		return {
			value:null,
		}
	},
	computed:{
		maxHeight() {
			let windowHeight = this.$u.sys().windowHeight;
			let h = windowHeight - systemInfo.statusBarHeight;
			return String(h)-56;
		},
	},
	methods:{
		cancel() {
			this.$emit("close")
		},
		radioGroupChange(e) {
			this.value = e;
			this.$emit("confirm",this.value);
			this.cancel();
		},
	}
}
</script>

<style scoped>
	.checkBack{
		padding: 32rpx;
		border-radius: 20rpx;
	}
</style>
